<template>
  <div class="data-frame">
    <div class="frame-title">Frame {{ frameNumber }}</div>
    <table>
      <thead>
        <tr>
          <th v-for="(header, index) in headers" :key="index">
            {{ header }}
            <span class="sort-icon">↕</span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in frameData" :key="index" :class="{ 'gray-bg': index % 2 === 0 }">
          <td v-for="(col, colIndex) in row" :key="colIndex" :class="{ 'link-style': colIndex === 0 }">
            {{ col }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
const props = defineProps({
  frameNumber: {
    type: [String, Number],
    required: true
  },
  headers: {
    type: Array,
    required: true
  },
  frameData: {
    type: Array,
    required: true
  }
})
</script>

<style lang="scss" scoped>
.data-frame {
  margin-bottom: 30px;

  .frame-title {
    font-size: 18px;
    margin-bottom: 15px;
    color: #666;
  }

  table {
    width: 100%;
    border-collapse: collapse;

    th, td {
      padding: 12px;
      text-align: left;
      border: 1px solid #ddd;
    }

    th {
      background-color: #f5f5f5;
      font-weight: 500;
      position: relative;

      .sort-icon {
        margin-left: 5px;
        cursor: pointer;
        color: #999;
      }
    }

    .gray-bg {
      background-color: #f9f9f9;
    }

    .link-style {
      color: #126983;
      cursor: pointer;
      text-decoration: underline;
    }
  }
}
</style>